<script lang="ts" setup>
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue'
import { RentBikeTablePageType, BikeType } from '@/types/enum'
import IdForm from '@/components/form/IdForm.vue'
import GoButton from '@/components/basic/GoButton.vue'
import RentBikeTable from '@/components/table/RentBikeTable.vue'
import { useTable } from '@/hooks/useTable'
import { queryBike } from '@/api/bike'
import { queryBikeTableCol } from '@/api/bike/types/bike'
import { getToken } from '@/utils/cache/cookies'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
defineOptions({
  name: 'LongBikeList'
})

const form = reactive({
  bikeCode: '',
  type: '0',
  storeId: ''
})
const { data, loading, pagination, load, handleCurrentChange, handleSizeChange, setCurrentPage } =
  useTable<queryBikeTableCol>(queryBike, getToken() ?? '', () => form)

onMounted(() => {
  load()
})
const onSubmit = () => {
  // 提交表单的逻辑
  setCurrentPage(1)
  load()
}
const router = useRouter()
const bikeAMap = () => {
  if (pagination.total == 0) {
    ElMessage.error('暂无数据')
    return
  }
  router.push({
    name: 'LongBikeAMap',
    query: {
      pageSize: pagination.total,
      ...form
    }
  })
}

/** 查看订单详情 */
const OrderInfoRef = ref<InstanceType<typeof OrderInfo> | null>(null)
const OrderInfo = defineAsyncComponent(() => import('@/components/dialog/OrderInfo.vue'))
const seeOrderInfo = (orderId: string, userId: string) => {
  OrderInfoRef.value?.setId(orderId, userId)
  OrderInfoRef.value?.open()
}
</script>

<template>
  <div class="xy-container">
    <id-form v-model="form" @search="onSubmit" type="bike">
      <template #before>
        <el-form-item float-right>
          <go-button icon-name="bike" @click="bikeAMap" />
        </el-form-item>
        <el-form-item prop="type" label="车辆状态">
          <el-select v-model="form.type" @change="load">
            <el-option value="0" label="全部车辆" />
            <el-option value="3" label="租赁中" />
            <el-option value="1" label="空闲中" />
            <el-option value="2" label="断网" />
          </el-select>
        </el-form-item>
      </template>
    </id-form>
    <rent-bike-table
      :data="data"
      :loading="loading"
      @show-orderinfo="seeOrderInfo"
      :page="RentBikeTablePageType.LongRent"
      :is-in-operators-info="false"
      :type="form.type as BikeType"
    />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
    <order-info ref="OrderInfoRef" />
  </div>
</template>

<style scoped>
.el-select {
  width: 120px;
}
</style>
